<template>
	<view class="content-class" :style="{ paddingTop: statusBarHeight + 'px' }">
		<u-navbar leftIconColor="#fff" bgColor="#1B1B1B" title="运动" :autoBack="true" @rightClick="skipDescribe">
			<u-icon color="#fff" slot="right" name="question-circle" size="18"></u-icon>
		</u-navbar>
		<u-row class="user-info">
			运动
			<u-icon name="setting" color="#fff" size="20"></u-icon>
		</u-row>
		<image style="width: 138px;height: 138px;position: absolute;top:97px;right: 20px;" src="/static/images/homePage/jkzs-bg.png"></image>

		<view class="jkzs-border">
			<view class="jkzs">
				<u-row>跑步 </u-row>
				<u-row class="jkzs-status">
					<u-row>
						<u-icon name="checkmark-circle" color="#FFD8BB" size="15"></u-icon>
						<!-- <image src="../../static/images/homePage/xl.png"></image> -->
						当前心率
					</u-row>
					<u-row>
						<!-- <image src="../../static/images/homePage/xl.png"></image> -->
						<u-icon name="hourglass-half-fill" color="#54D7A5" size="15"></u-icon>
						当前电量
					</u-row>
				</u-row>
				<u-row class="status-num">
					<span> 93 <span>次/秒</span></span>
					<span> 93 <span>%</span></span>
				</u-row>
			</view>
		</view>
		<u-row justify="center" style="font-size: 12px;color:#999">运动距离 (km)</u-row>
		<u-row justify="center" style="font-size: 50px;line-height: 61px;">5.26</u-row>
		<u-row>
			<u-col :span="4" v-for="i in cardList" :key="i.title">
				<view class="sport-card">
					<image style="width: 11px;height: 11px" :src="i.icon"></image>
					<view v-if="i.unit1" class="number">{{i.subTitle ? i.subTitle.split('h')[0]:'' }}<span>{{i.unit}}</span>{{i.subTitle ? i.subTitle.split('h')[1].replace('min',''):'' }}<span>{{i.unit1}}</span></view>
					<view v-else class="number">{{i.subTitle }}<span>{{i.unit}}</span></view>
					<view>{{i.title}}</view>
				</view>
			</u-col>
		</u-row>
		<view class="sport-btn">开始跑步</view>
		<view class="sport-chart">
			<u-row>运动统计</u-row>
			<charts :option="option1" id="6" :height="158"></charts>
		</view>
	</view>
</template>
<script>
	import {
		getRandomNumber
	} from "@/utils/index.js"
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				cardList: [{
					title: '步数',
					icon: require("../../static/images/homePage/cyjk.png"),
					subTitle: '65482',
					unit: '步',
				}, {
					title: '时间',
					icon: require("../../static/images/homePage/zywz.png"),
					subTitle: '2h36min',
					unit: 'h',
					unit1: 'min',
				}, {
					title: '热量',
					icon: require("../../static/images/homePage/zywz.png"),
					subTitle: '230.19',
					unit: 'kcal',
				}],
				option1: {
					grid: {
						top: "middle",
						left: "20px",
						height: "70%",
						bottom: "0px",
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						position: 'top',
						nameTextStyle: {
							align: 'center'
						},
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "rgba(255,255,255,0.2)",
							},
						},

					},
					yAxis: {
						type: 'value',
						// max: 90,
						// min: 30,
						splitLine: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						label: {
							show: true,
							color: '#fff'
						},
						type: 'line',
						smooth: true,
						showAllSymbol: true,
						symbolSize: 8, // 设置点的大小
						symbolOffset: [0, 0],
						itemStyle: {
							color: '#02A166', // 设置标记点的颜色
							borderColor: '#F3D2BA', // 设置边框颜色（可以是白色或其他颜色）
							borderWidth: 2, // 设置边框宽度
							shadowBlur: 10, // 设置阴影模糊大小
							shadowColor: '#E1945C' // 设置阴影颜色为渐变色
						},
						lineStyle: {
							width: 1,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#02A166' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFD8BB' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ]
					// 	series: [{
					// 		data: [150, 230, 224, 218, 135, 147, 260],
					// 		type: 'line',
					// 		symbolSize: 0,
					// 		lineStyle: {
					// 			width: 1,
					// 			color: {
					// 				type: 'linear',
					// 				x: 0,
					// 				y: 0,
					// 				x2: 0,
					// 				y2: 1,
					// 				colorStops: [{
					// 					offset: 0,
					// 					color: '#02A166' // 0% 处的颜色
					// 				}, {
					// 					offset: 1,
					// 					color: '#FFD8BB' // 100% 处的颜色
					// 				}],
					// 				global: false // 缺省为 false
					// 			}
					// 		},
					// 	}]

				},

			}
		},
		components: {},
		onLoad() {
			let _this = this
			let heartRateData = []
			for (let i = 0; i < 30; i++) {
				heartRateData.push(getRandomNumber(0, 10000));
			}
			// this.option1.series[0].markArea.data =

			//  heartRateData
			this.option1.series[0].data = heartRateData
			this.option1.xAxis.data = heartRateData.map((_, index) => `T${index}`)
			this.option1.series[0].symbol = function(value, params) {
				if (params.dataIndex === heartRateData.length - 1) {
					return 'circle'; // 最后一个点显示圆形
				} else {
					return 'none'; // 其他点不显示
				}
			}
			this.option1.series[0].label.formatter = function(params) {
				if (params.dataIndex === heartRateData.length - 1) {
					return params.data;
				} else {
					return '';
				}
			}
		},
		computed: {
			...mapGetters(["userInfo", "statusBarHeight"]),
		},
		methods: {
			skipDescribe() {
				uni.navigateTo({
					url: "/pages/PublicPage/PublicPage?pageConfig=" + JSON.stringify({
						page: 'Describe',
						name: '步数说明',
					})
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content-class {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;

		background-image: url("../../static/images/homePage/bg.png");
		background-size: 100% auto;
		background-position: top;
		background-repeat: no-repeat;
		position: relative;

		.user-info {
			margin-bottom: 30px;
			margin-top: 20px;
			position: relative;
			height: 22px;
			font-weight: 800;
			font-size: 16px;
			line-height: 22px;

			image {
				width: 22px;
				height: 22px;
				margin-right: 6px;

			}

			.u-icon {
				position: absolute;
				right: 0px;
			}

		}

		.sport-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 12px;
			color: #999999;
			margin-top: 20px;

			.number {
				font-size: 20px;
				color: #FFFFFF;
				margin: 6px 0px;

				span {
					font-size: 8px;
					margin: 0px 1px;
				}
			}
		}

		.sport-btn {
			display: flex;
			align-items: center;
			background: linear-gradient(90deg, #FFD8BB 0%, #F0986A 100%);
			border-radius: 30px;
			font-size: 20px;
			color: #0B0F12;
			text-align: center;
			justify-content: center;
			height: 60px;
			margin: 30px 20px;
			font-weight: bold;
		}

		.sport-chart {
			font-weight: bold;
			font-size: 14px;
		}

	}

	.jkzs-border {
		border-radius: 12px;
		margin-bottom: 30px;
		overflow: hidden;
	}

	.jkzs {
		border: 1px solid;
		border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16px;
		width: 100%;
		height: 131px;
		background: #0B0F12;
		box-shadow: inset 0px 0px 12px 6px #2C281F;
		font-weight: bold;
		font-size: 24px;


		.jkzs-status {
			font-size: 12px;

			.u-icon {
				margin-right: 3px;
			}
		}


		.jkzs-status .u-row:first-child {
			margin-right: 37px;
			color: #FFD8BB;
		}

		.jkzs-status .u-row:last-child {
			color: #54D7A5;
		}

		.status-num span:first-child {
			color: #FFD8BB;
			font-size: 24px;
			width: 66px;
			margin-right: 37px;
			white-space: nowrap;

			span {
				font-size: 8px;
				color: #fff
			}
		}

		.status-num span:last-child {
			color: #54D7A5;
			font-size: 24px;

			span {
				font-size: 8px;
				color: #fff
			}
		}
	}
</style>